<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery.min.js"></script>
    <!-- 引入bootstarp -->
    <script type="text/javascript" src="../js/bootstrap3/js/bootstrap.js"></script>
    <link rel="stylesheet" href="../js/bootstrap3/css/bootstrap.css">
    <!-- 引入tree的js、css -->
    <script type="text/javascript" src="../js/bootstrap-treeview/bootstrap-treeview.min.js"></script>
    <link rel="stylesheet" href="../js/bootstrap-treeview/bootstrap-treeview.min.css">
    <!-- 引入选项卡的js、css -->
    <script type="text/javascript" src="../js/bootStrap-addTabs/bootstrap.addtabs.js"></script>
    <link rel="stylesheet" href="../js/bootStrap-addTabs/bootstrap.addtabs.css">

</head>
<body>
<ul class="nav navbar-nav">
        <a  style="background-color: #00cbe5"></a>
    </li>
    <li>
        <a class="glyphicon glyphicon-grain" style="background-color: #00cbe5"></a>
    </li>
    <li>
        <a class="glyphicon glyphicon-grain" style="background-color: #00cbe5"></a>
    </li>
    <li>
        <a class="glyphicon glyphicon-grain" style="background-color: #00cbe5"></a>
    </li>
    <li>
        <a onclick="gerenn()" class="glyphicon glyphicon-cloud-download" style="background-color: #a1abff">&nbsp个人信息</a>
    </li>
    <li>
        <a class="glyphicon glyphicon-grain" style="background-color: #00cbe5"></a>
    </li>
    </li>
    <li>
        <a class="glyphicon glyphicon-grain" style="background-color: #00cbe5"></a>
    </li>
    <li>
        <a class="glyphicon glyphicon-grain" style="background-color: #00cbe5"></a>
    </li>
    <li>
        <a class="glyphicon glyphicon-grain" style="background-color: #00cbe5"></a>
    </li>
    <li>
        <a class="glyphicon glyphicon-grain" style="background-color: #00cbe5"></a>
    </li>
    <li>
        <a class="glyphicon glyphicon-grain" style="background-color: #00cbe5"></a>
    </li>
    <li>
        <a class="glyphicon glyphicon-grain" style="background-color: #00cbe5"></a>
    </li>
    <li>
        <a class="glyphicon glyphicon-grain" style="background-color: #00cbe5"></a>
    </li>
    <li>
        <a class="glyphicon glyphicon-grain" style="background-color: #00cbe5"></a>
    </li>
    <li>
        <a class="glyphicon glyphicon-grain" style="background-color: #00cbe5"></a>
    </li>
    <li>
        <a class="glyphicon glyphicon-grain" style="background-color: #00cbe5"></a>
    </li>
    </li>
    <li>
        <a class="glyphicon glyphicon-grain" style="background-color: #00cbe5"></a>
    </li>
    <li>
        <a class="glyphicon glyphicon-grain" style="background-color: #00cbe5"></a>
    </li>
    <li>
        <a class="glyphicon glyphicon-grain" style="background-color: #00cbe5"></a>
    </li>
    <li>
        <a class="glyphicon glyphicon-grain" style="background-color: #00cbe5"></a>
    </li>
    <li>
        <a class="glyphicon glyphicon-grain" style="background-color: #00cbe5"></a>
    </li>
    <li>
        <a class="glyphicon glyphicon-grain" style="background-color: #00cbe5"></a>
    </li>
    <li>
        <a class="glyphicon glyphicon-grain" style="background-color: #00cbe5"></a>
    </li>
    <li>
        <a href="../page/zhuye" class="glyphicon glyphicon-grain" style="background-color: #a1abff">&nbsp商城</a>
    </li>
    <li class="active ">
        <a href="#"class="glyphicon glyphicon-shopping-cart" style="background-color: #a1abff">&nbsp购物车
            <span class="sr-only">(current)</span></a></li>
    <li>
    <li>
        <a href="../page/toyimaidao" class="glyphicon glyphicon-grain" style="background-color: #a1abff">&nbsp我的订单</a>
    </li>
    <li>
        <a href="#" class="glyphicon glyphicon-sunglasses" style="background-color: #a1abff">&nbsp在线退货</a>
    </li>
    <li>
        <a href="#" class="glyphicon glyphicon-cloud" style="background-color: #a1abff">&nbsp在线投诉</a>
    </li>
    <li>
        <a href="#" class="glyphicon glyphicon-cloud-upload" style="background-color: #a1abff">&nbsp配送范围</a>
    </li>
    <li>
        <a href="#" class="glyphicon glyphicon-cloud-download" style="background-color: #a1abff">&nbsp联系我</a>
    </li>
    <li>
        <a onclick="logout()" class="glyphicon glyphicon-cloud-download" style="background-color: #a1abff">&nbsp;注销</a>
    </li>

</ul>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<u>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</u>

<!--树标签-->
<div class="container-fluid">
    <div class="row">
        <div class="col-md-2 col-dm-2 col=xs-2">
            <div id="myTree"></div>

        </div>
        <div class="col-md-10  col-dm-10 col=xs-10 ">

            <div id="myTabs">
                <!--新选项卡  -->
                <ul class="nav nav-tabs" id="tablist">
                    <li role="presentation" class="active">
                        <a href="#home" role="tab" data-toggle="tab">欢迎</a>
                    </li>
                </ul>
                <!--选项卡下的内容  -->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="home">欢迎使用
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    $(function(){
        initNavTree();
    })

    function gerenn() {
        location.href="geren";
    }

    function logout(){
        location.href="../wjs/logout";
    }

    function initNavTree(){
        $.ajax({
            url:"../wjs/findMaiList",
            data:{},
            success:function(data){
                $("#myTree").treeview({
                    data:data,
                    onNodeSelected:function(event,node){
                        $.addtabs({iframeHeight:500});
                        $.addtabs.add({
                            id:node.id,
                            title:node.text,
                            url:"../"+node.path

                        });
                    }
                });
            }
        })
    }

    function tiao() {
        location.href="../page/";
    }

    //修改密码
    function updatePassword(userId){
        var password=$("#password").val();
        $.ajax({
            url:"../wjs/updatePassword",
            data:{userId:userId,password:password},
            type:"post",
            dataType:"json",
            success:function(data){
                if (data) {
                    bootbox.alert({
                        message:'修改成功!新密码是'+password+'',
                        size:'small'
                    })
                }else{
                    bootbox.alert({
                        message:'修改失败!',
                        size:'small'
                    })
                }
            }
        })
    }

    var res;
    function loadPage(url){
        $.ajax({
            url:url,
            async:false,
            success:function(data){
                res = data;
            }
        });
        return res;
    }

    //修改密码弹窗
    function openUpDatePassword(userId){
        bootbox.dialog({
            title:'<i class="glyphicon glyphicon-pencil"></i>修改密码',
            message:loadPage('../page/toUpdatePassword'),
            size:'large',
            buttons:{
                cancel:{
                    label: "取消",
                    className: 'btn-danger',
                    callback: function(){
                    }
                },
                ok:{
                    label: "保存",
                    className: 'btn-info',
                    callback: function(){
                        updatePassword(userId);
                    }
                }
            }
        })
    }

    //验证密码
    function updateUserPassword(){
        var locale = {
            OK: 'I Suppose',
            CONFIRM: '确定',
            CANCEL: '取消'
        };
        bootbox.addLocale('custom', locale);
        bootbox.prompt({
            title: "请输入旧密码?",
            locale: 'custom',
            callback: function (result) {
                //判断输入的值是否为空
                if (result!=null) {
                    $.ajax({
                        url:"../wjs/codePassword",
                        data:{password:result},
                        type:"post",
                        dataType:"json",
                        success:function(data){
                            if (data.code==2) {//密码正确
                                openUpDatePassword(data.msg);
                            }else{//密码错误
                                bootbox.alert({
                                    message:'请输入正确的密码!',
                                    size:'small'
                                })
                            }
                        }
                    })
                }else{
                    bootbox.alert({
                        message:'请输入正确的密码!',
                        size:'small'
                    })
                }
            }
        });
    }

</script>
</html>